<title>Conversations</title>
<link rel="stylesheet" href="/resources/css/conversations.css">


<div class="page-body">
	<div class="container-xl">
		<div class="row g-4">
			<div class="col-3 filter-column">
				<form class="filter">
					<div class="page-pretitle">
						Explore
					</div>
					<h2 class="page-title">
						<a id="conversations-reset">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
								fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
								stroke-linejoin="round"
								class="icon icon-tabler icons-tabler-outline icon-tabler-messages">
								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
								<path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10" />
								<path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2" />
							</svg>
							Conversations
						</a>
					</h2>
					<div id="showing-info" class="text-secondary mt-1 mb-4">Showing <span id="convos-count"></span> most
						recent (<span id="convos-duration"></span>)</div>


					<label class="form-label">People involved</label>
					<div class="mb-4">
						<select class="entity-input form-select" placeholder="Name or contact info">
						</select>
						<label class="form-check mt-2">
							<input type="checkbox" class="form-check-input" id="selected-entities-only" value="1"
								disabled>
							<span class="form-check-label">Only these people</span>
						</label>
					</div>

					<div class="tl-date-picker">

					</div>

					<label class="form-label">Text search</label>
					<div class="mb-4">
						<input type="text" class="form-control" placeholder="Key word or phrase" id="message-substring">
					</div>


					<select multiple class="tl-data-source form-select mb-3" placeholder="Data sources"
						autocomplete="off">

					</select>

					<div class="mb-4 tl-item-class-dropdown">

					</div>

					<div class="d-grid gap-2 mb-4">
						<button type="button" class="btn btn-outline-secondary" id="clear-filter">
							<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
								<path stroke="none" d="M0 0h24v24H0z" fill="none" />
								<line x1="18" y1="6" x2="6" y2="18" />
								<line x1="6" y1="6" x2="18" y2="18" />
							</svg>
							Clear Filters
						</button>
					</div>
				</form>
			</div>

			<div class="col-9 content-column">
				<div id="convos-container" class="filter-results row row-cards d-none">

				</div>
				<div id="convo-container" class="filter-results card d-none">
					<div class="chat card-body">
						<div class="chat-bubbles">

						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>


<template id="tpl-convo">
	<div class="convo-card col-sm-6 col-lg-4 mb-4">
		<a class="card card-link card-stacked">
			<div class="card-body">
				<h3 class="card-title"></h3>
				<p class="convo-preview text-secondary"></p>
			</div>
			<div class="card-footer">
				<div class="row align-items-center justify-content-between">
					<div class="col">
						<div class="convo-datetime text-secondary"></div>
					</div>
					<div class="col-auto d-flex justify-content-center">
						<div class="avatar-list avatar-list-stacked"></div>
					</div>
				</div>
			</div>
		</a>
	</div>
</template>